<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src="/javascripts/vue@3.0.11.js" ></script>
</head>
<body>

<div id="first">
    <div v-for="b in books" class="row">
        <span class="col-3">{{b.id}}</span>
        <span class="col-3">{{b.name}}</span>
        <span class="col-3">{{b.price}}</span>
        <span class="col-3">
            <a class="btn btn-primary" @click="remove">删除</a>
        </span>
    </div>
</div>

<a href="/index.html">返回首页</a>

<script>
    let options = {
        data(){
            return {
                books: [
                    { id: 1 , name: 'Vue.js从入门到放弃' , price: 99.8 } ,
                    { id: 2 , name: 'MySQL从删库到跑路' , price: 99.8 } ,
                    { id: 3 , name: 'JavaScritp从不会到不会' , price: 99.8 } ,
                ]
            }
        },
        methods: {
            remove(){

            }
        }
    }

    const app = Vue.createApp( options );
    app.mount( '#first' );

</script>

</body>
</html>